
import React from 'react';
import Home from './routes/home';
import Live from './routes/live';
import Issue from './routes/issue';
import Mine from './routes/mine';
import { Platform, StyleSheet, Image, Text, View, Alert, ScrollView, TouchableOpacity, Button } from 'react-native';
const tabBarArr = [
  { 'name': '首页', icon: require('./assets/images/home-off.png'), iconActive: require('./assets/images/home-on.png') },
  { 'name': '直播', icon: require('./assets/images/live-off.png'), iconActive: require('./assets/images/live-on.png') },
  { 'name': '点播', icon: require('./assets/images/play-off.png'), iconActive: require('./assets/images/play-on.png') },
  { 'name': '我的', icon: require('./assets/images/my-off.png'), iconActive: require('./assets/images/my-on.png') }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      indexActive: 0
    }
  }

  componentDidMount() {

  }

  switchBar(i){
    console.log(i)
  }

  getDom(i) {
    let _dom = <Home />;
    switch (i) {
      case 0:
          _dom = <Home />;
        break;
      case 1:
          _dom = <Live />;
        break;
      case 2:
          _dom = <Issue />;
        break;
      case 3:
          _dom = <Mine />;
        break;
    }
    return _dom;
  }

  render() {
    let { indexActive } = this.state;
    return (
      <View style={styles.box}>
        {this.getDom(indexActive)}
        <View style={styles.navBootmoBar}>
          {
            tabBarArr.map((item, index) => {
              return <View key={index} onPress={() => {alert('点击')}} style={styles.navBootmoBarItem}>
                <Image style={styles.tabIcon} source={indexActive == index ? item.iconActive : item.icon} />
                <Text style={{ color: indexActive == index ? '#1196db' : '#000' }}>{item.name}</Text>
              </View>
            })
          }
        </View>
      </View>
    );
  }
};
const styles = StyleSheet.create({
  box: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#fff'
  },
  navBootmoBar: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    height: 90,
    borderTopWidth: 0.5,
    borderStyle: "solid",
    borderTopColor: '#fff',
    backgroundColor: 'rgba(0,0,0,0)',
    position: 'absolute',
    left: 0,
    bottom: 0
  },
  navBootmoBarItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabIcon: {
    width: 22,
    height: 22,
    marginBottom: 5,
    marginRight: 1.8
  },
  issueIcon: {
    width: 60,
    height: 60
  }
})
export default App;